<template>
  <div class="four">
    <div class="flex align-center justify-center position-relative">
      <div class="w-100">
        <div class="colorfff font28 font-weight-500">
          {{dataFourInfo.vcCompanyName}}
        </div>
        <div class="num"><span class="today_sale">今日销售</span>{{numFormat(dataFourInfo.rxsCount)}} <span>吨</span></div>
        <!-- <div class="colorfff font20">全年纳税金额</div> -->
        <!-- <div class="num">
          
          10.000.000 
          <span>万元</span>
          
        </div> -->

      <div class="per_line_new">
        <div class="per_line flex justify-center  ">
          <div class="per_line_back flex align-center">
            <div class="common_text left_text">今日销售额</div>
            <div class="common_text middle_text red_text ml-1">{{dataFourInfo.jrxsPrice}}万元</div>
            <div class="common_text right_text flex justify-end align-center flex-1">
              <div>较昨日</div>
              <div class="flex align-center"  v-if="dataFourInfo.zrxsCount<0">
                <p class="green_text">{{dataFourInfo.zrxsCount}}% </p>
                <img src="@/assets/img/company/icon_arrow_down_right.png">
              </div>
              <div class="flex align-center" v-else>
                <p class="red_deep_text">{{dataFourInfo.zrxsCount}}% </p>
                <img v-if="dataFourInfo.zrxsCount != 0" src="@/assets/img/company/icon_arrow_up_right.png">
              </div>
            </div>
          </div>
        
          <div class="per_line_back flex align-center marginleft17">
            <div class="common_text left_text">今日均价</div>
            <div class="common_text middle_text yellow_text ml-1">{{dataFourInfo.jrjj}}元/吨</div>
            <div class="common_text right_text flex justify-end align-center flex-1">
              <div>较昨日</div>
              <div class="flex align-center"  v-if="dataFourInfo.zrjj<0">
                <p class="green_text">{{dataFourInfo.zrjj}}% </p>
                <img src="@/assets/img/company/icon_arrow_down_right.png">
              </div>
              <div class="flex align-center" v-else>
                <p class="red_deep_text">{{dataFourInfo.zrjj}}% </p>
                <img v-if="dataFourInfo.zrjj != 0" src="@/assets/img/company/icon_arrow_up_right.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="per_line_new">
        <div class="per_line flex justify-center">
          <div class="per_line_back flex align-center">
            <div class="common_text left_text">今日开票量</div>
            <div class="common_text middle_text yellow_text ml-1">{{dataSecondInfo.ykpCount}}张</div>
            <div class="common_text right_text flex justify-end align-center flex-1">
              <div>较昨日</div>
              <div class="flex align-center"  v-if="dataFourInfo.zrkpCount<0">
                <p class="green_text">{{dataFourInfo.zrkpCount}}% </p>
                <img src="@/assets/img/company/icon_arrow_down_right.png">
              </div>
              <div class="flex align-center" v-else>
                <p class="red_deep_text">{{dataFourInfo.zrkpCount}}% </p>
                <img v-if="dataFourInfo.zrkpCount != 0" src="@/assets/img/company/icon_arrow_up_right.png">
              </div>
            </div>
          </div>

          <div class="per_line_back flex align-center marginleft17">
            <div class="common_text left_text">今日预警</div>
            <div class="common_text middle_text blue_text ml-1">0个</div>
            <div class="common_text right_text flex justify-end align-center flex-1">
              <div>较昨日</div>
             <div class="flex align-center"  v-if="true">
                <p class="green_text">0% </p>
                <img v-if="false" src="@/assets/img/company/icon_arrow_down_right.png">
              </div>
              <div class="flex align-center" v-else>
                <p class="red_deep_text">0% </p>
                <img v-if="false" src="@/assets/img/company/icon_arrow_up_right.png">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="per_line_new flex justify-center margintop20">
        <div class="per_line_back2 flex align-center">
          <div class="per_left flex align-center">
            <img src="@/assets/img/company/icon_camera.png">
            <div class="kcjk_text">矿场监控</div>
            <div class="kcjk_num">0个</div>
          </div>
           <div class="per_right">
             <div class="per_right_left flex">在线<p>0个</p></div>
             <div class="per_right_right flex">离线<p>0个</p></div>
           </div>
        </div>
      </div>
    </div>
   
      <!-- <div class="position-absolute item01 flex align-center justify-center">
        <div>
          <div class="font16 colorfff mb-2">累计销售</div>
          <div class="font18" style="color: #00e4ff">1.000.000</div>
          <div class="font12" style="color: #00e4ff">万吨</div>
        </div>
      </div> -->
      <!--<div class="position-absolute item02 flex align-center justify-center">
        <div>
          <div class="font16 colorfff mb-2">累计运输</div>
          <div class="font18" style="color: #00e4ff">800.000</div>
          <div class="font12" style="color: #00e4ff">万吨</div>
        </div>
      </div>-->
    </div>
  </div>
</template>
<script>
import companyApi from "@/api/company/index";
export default {
  name: "companyFour",
  data() {
    return {
      dataFourInfo:{},
      dataSecondInfo:{}
    };
  },
  mounted() {
    this.dataFour()
    this.getxssjz()
  },
  methods: {
     getxssjz() {
       console.error('dsdsd')
      let that = this;
      companyApi
        .dataFirst({longCompanyId:this.$route.query.longCompanyId})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.dataSecondInfo = res;
     
 
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    numFormat(num) {
      if(num == 0) return 0
      if(!num) return ''
      let ret = (num.toString().indexOf ('.') !== -1) ? 
      num.toLocaleString() : 
      num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
      return ret;
    },
     dataFour() {
      let that = this;
      companyApi
        .dataFour({longCompanyId:this.$route.query.longCompanyId})
        .then(function (res) {
          if (res.code == 200) {
            res = res.data;
            that.dataFourInfo = res;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>
<style lang="stylus" scoped>
.today_sale{
  background: linear-gradient(90deg, #027AFF 0%, #00E3FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 28px;
  margin-right:19px;
}



.four {
  width: 694px;
  height: 537px;
  background: url('../../../assets/img/company/bg04.png') no-repeat;
  background-size: 694px 537px;

  .font28 {
    margin-top: 106px;
  }

  .num {
    // height: 60px;
    font-size: 56px;
    margin-top: 35px;
    font-family: MicrosoftYaHei;
    font-weight: bold;
    color: #33D7FA;
    background: linear-gradient(90deg, #027AFF 0%, #00E3FF 99.4873046875%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .font20 {
    margin-top: 75px;
  }
}

span {
  font-size: 24px;
  font-weight: 400;
  color: #00E4FF;
}

.position-absolute {
  width: 148px;
  top: 332px;
  height: 148px;
  background: url('../../../assets/img/company/icon01.png') no-repeat;
  background-size: 148px 148px;
}

.item01 {
  left: 0;
}

.item02 {
  right: 0;
}
.margintop20{
  margin-top:10px;
}
.per_line_new{
  display:flex;
  width:100%;

  .per_line{
    margin-top:15px; 
    width:100%;  
    .per_line_back{ 
      background-image:url('../../../assets/img/company/bg_line.png');
      background-size:333px 62px;
      width:333px;
      height:62px; 
      padding-left:20px;
      padding-right:18px;
      
      .common_text{
        font-size: 18px;
        color: #CCCCCC;
      }
      .middle_text{ 
        font-size: 20px;
      }
      .right_text{  
        font-size: 15px;
      }
      .right_text p{
        margin-left:12px;
      }

 
      .right_text img{
        width:15px;
        height:14px; 
        margin-left:3px;
      }

      .red_text{
        color:#EB497F;
      }
      .yellow_text{
        color:#FEDF7A;
      }
      .blue_text{
        color:#00E0FF;
      }
      .red_deep_text{
        color:#FF3A3A;
      }
      .green_text{
        color:#7BFF3A;
      }
    }
    .marginleft17{
      margin-left:17px;
    }

    
  }

  .per_line_back2{
    background-image:url('../../../assets/img/company/bg_line2.png');
    background-size:677px 100px;
    width:677px;
    height:100px;  

    .per_left{
      padding-left:51px; 
      img{
          width:32px;
          height:42px;
        }
        .kcjk_text{
          font-size:24px;
          margin-left:22px;
          color: #CCCCCC;
        }
        .kcjk_num{
          font-size:36px;
          margin-left:25px;
          color: #00E4FF;
        }
    }

    .per_right{
      padding-right:39px;
      flex:1;
      display:flex;
      justify-content:flex-end;
      // margin-right:39px; 
      .per_right_left{
        font-size:18px;
        color:#cccccc;
        p{
          margin-left:28px;
          font-size: 20px;
          color: #7BFF3A;
        }
      }
      .per_right_right{
        font-size:18px;
        color:#cccccc;
        margin-left:90px;
        p{     
          margin-left:28px;
          font-size: 20px;
          color: #EB497F;
        }
      }

    }
  }

}



</style>
